<template>
  <div>
    <div id="p5Canvas"></div>
  </div>
</template>

<script>

import p5 from 'p5/lib/p5.js'
// import p5 from 'p5'
// import VueP5 from 'vue-p5'

export default {
  props: {
    width: Number,
    height: Number,
    type: Number
  },
  methods: {
    create_layout(width, height, style) {

    }
  },
  data() {
    return {
      rs: [200, 250, 300, 100],
      thetas: [0.0, 0.0, 0.0, 0.0],
      vs: [0, 0.03, 0.04, 0.00],
      Nums: 200
    }
  },
  mounted() {
    const that = this
    const sketch = function (p5) {
      // var speed = 2
      // var posX = 0
      var width = 500
      var height = 500

      // NOTE: Set up is here
      p5.setup = _ => {
        var canvas = p5.createCanvas(width, height)
        canvas.parent('#p5Canvas')

        // p5.createCanvas(800, 800)
        p5.noFill()
        p5.stroke(255, 150)

        // p5.ellipse(p5.width / 2, p5.height / 2, 500, 500)
      }
      // NOTE: Draw is here
      p5.draw = _ => {
        p5.background(0)
        p5.translate(width / 2, height / 2)
        for (var i = 0; i < that.Nums; i++) {
          var xs = []
          var ys = []
          for (var k = 0; k < 4; k++) {
            that.thetas[k] += that.vs[k] / that.Nums
            var theta = that.thetas[k] + Math.PI * 2 / that.Nums * i
            xs.push(Math.cos(theta) * that.rs[k])
            ys.push(Math.sin(theta) * that.rs[k])
            p5.stroke(255 / that.Nums * i, 255 - 255 / that.Nums * i, 0, 150)
            p5.bezier(xs[1], ys[1], xs[2], ys[2], xs[3], ys[3], xs[0], ys[0])
            p5.stroke(255 / that.Nums * i, 255 / that.Nums * i, 0, 150)
            p5.bezier(xs[1], ys[1], xs[3], ys[3], xs[2], ys[2], xs[0], ys[0])
          }
        }
        // p5.background(0)
        // const degree = p5.frameCount * 3
        // const y = p5.sin(p5.radians(degree)) * 50

        // p5.push()
        // p5.translate(0, p5.height / 2)
        // p5.ellipse(posX, y, 50, 50)
        // p5.pop()
        // posX += speed

        // if (posX > p5.width || posX < 0) {
        //   speed *= -1
        // }
      }
    }
    // NOTE: Use p5 as an instance mode
    // const P5 = require('p5')
    this.p5_inst = new p5(sketch)
  },
  unmounted() {
    this.p5_inst.remove()
    console.log('Animate.vue unmounted')
  }
}
</script>
